<template>
  <view class="container">
    <!-- 操作栏 -->
    <view class="action-bar">
      <uv-text text="消息列表"></uv-text>
      <uv-icon name="trash" size="22" color="#666" @click="clearUnread"></uv-icon>
    </view>

    <!-- 消息列表 -->
    <scroll-view class="scroll-view" scroll-y @scrolltolower="loadMore" refresher-enabled
      :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
      <view class="message-list">
        <view v-for="(item, index) in messageList" :key="index" class="message-item">
          <view class="avatar">
            <uv-avatar :src="item.avatar || '/static/avatar.png'" size="45"></uv-avatar>
            <uv-badge v-if="item.unreadCount > 0" :value="item.unreadCount" type="error" absolute
              :offset="[-5, -5]"></uv-badge>
          </view>
          <view class="content">
            <view class="header">
              <text class="name">{{ item.name }}</text>
              <text class="time">{{ item.time }}</text>
            </view>
            <text class="preview">{{ item.lastMessage }}</text>
          </view>
        </view>
        <uv-load-more :status="loadStatus" />
      </view>
    </scroll-view>

    <!-- 空消息 -->
    <view class="none-message" v-if="messageList.length === 0">
      <uv-empty mode="message" icon="/static/img/message.png"></uv-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IMessageItem } from '@/types/message'
import { getMessageList, clearUnreadCount } from '@/api/messageApi'

// 消息列表数据
const messageList = ref<IMessageItem[]>([])
const currentPage = ref(1)
const loadStatus = ref<'loadmore' | 'loading' | 'nomore'>('loadmore')
const isRefreshing = ref(false)

// 加载消息
const loadMessages = async (isRefresh = false) => {
  try {
    loadStatus.value = 'loading'

    // 模拟接口调用，实际替换为真实接口
    const { data } = await getMessageList(currentPage.value)

    if (isRefresh) messageList.value = []
    messageList.value = [...messageList.value, ...data]

    loadStatus.value = data.length < 10 ? 'nomore' : 'loadmore'
    currentPage.value++
  } finally {
    isRefreshing.value = false
    loadStatus.value = 'loadmore'
  }
}

// 下拉刷新
const onRefresh = () => {
  isRefreshing.value = true
  currentPage.value = 1
  loadMessages(true)
}

// 上拉加载
const loadMore = () => {
  if (loadStatus.value !== 'nomore') {
    loadMessages()
  }
}

// 清除未读
const clearUnread = async () => {
  try {
    // 调用清除未读接口
    await clearUnreadCount()

    // 清空本地未读计数
    messageList.value = messageList.value.map((item:IMessageItem) => ({
      ...item,
      unreadCount: 0
    }))

    uni.showToast({ title: '未读已清除', icon: 'success' })
  } catch (e) {
    console.error('清除未读失败:', e)
  }
}


// 初始化加载
loadMessages()
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
}

.none-message {
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-list {
  padding: 20rpx;

  .message-item {
    display: flex;
    padding: 20rpx;
    margin-bottom: 20rpx;
    background: #fff;
    border-radius: 12rpx;
    position: relative;
    .avatar{
      position: relative;
    }
    .content {
      flex: 1;
      margin-left: 20rpx;

      .header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rpx;

        .name {
          font-size: 28rpx;
          color: #333;
        }

        .time {
          font-size: 24rpx;
          color: #999;
        }
      }

      .preview {
        font-size: 26rpx;
        color: #666;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
    }
  }
}

.action-bar {
  padding: 20rpx;
  display: flex;
  justify-content: flex-end;
  background: #fff;
}

.scroll-view {
  height: calc(100vh - 120rpx);
}
</style>
